<template>
  <div class="question-page">
    <!-- 顶部标题区域 -->
    <div class="page-header mb-6">
      <h2 class="title">题库管理</h2>
      <p class="desc">管理焊接相关的试题，支持单选题、多选题和判断题</p>
    </div>

    <!-- 搜索与操作区 -->
    <el-card class="search-card mb-6">
      <div class="search-container">
        <el-row :gutter="24">
          <!-- 搜索与筛选 -->
          <el-col :span="24">
            <el-row :gutter="24">
              <el-col :span="10">
                <el-input
                  v-model="searchForm.keyword"
                  placeholder="搜索题目内容"
                  prefix-icon="el-icon-search"
                  clearable
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-select
                  v-model="searchForm.category"
                  placeholder="所有分类"
                  clearable
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-select
                  v-model="searchForm.type"
                  placeholder="所有题型"
                  clearable
                >
                  <el-option label="单选题" value="1"></el-option>
                  <el-option label="多选题" value="2"></el-option>
                  <el-option label="判断题" value="3"></el-option>
                </el-select>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-select
                  v-model="searchForm.status"
                  placeholder="所有状态"
                  clearable
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="停用" value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4" style="min-width: 200px;">
                <el-button 
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                >
                  搜索
                </el-button>
                <el-button 
                  @click="handleReset"
                >
                  重置
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 试题列表 -->
    <el-card>
      <div class="table-header">
        <el-button 
          type="primary" 
          icon="el-icon-plus"
          @click="openQuestionModal()"
          size="medium"
        >
          添加试题
        </el-button>
      </div>
      <el-table
        :data="questionList"
        v-loading="loading"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <!-- 序号列 -->
        <el-table-column
          prop="id"
          label="题目ID"
          width="80"
          align="center"
        ></el-table-column>

        <!-- 分类列 -->
        <el-table-column
          prop="category"
          label="分类"
          min-width="120"
        ></el-table-column>

        <!-- 题型列 -->
        <el-table-column
          label="题型"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :class="['question-tag', `question-tag-${scope.row.type}`]"
              size="small"
            >
              {{ typeLabelMap[scope.row.type] }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 题目列 -->
        <el-table-column
          prop="content"
          label="题目"
          min-width="300"
        >
          <template slot-scope="scope">
            <div class="question-content" :title="scope.row.content">
              {{ scope.row.content }}
            </div>
          </template>
        </el-table-column>

        <!-- 答案列 -->
        <el-table-column
          label="答案"
          min-width="150"
        >
          <template slot-scope="scope">
            <div class="answer-content">
              {{ formatAnswer(scope.row) }}
            </div>
          </template>
        </el-table-column>

        <!-- 状态列 -->
        <el-table-column
          label="状态"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '1' || scope.row.status === 1 ? 'success' : 'info'"
              size="small"
            >
              {{ scope.row.status === '1' || scope.row.status === 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 创建时间列 -->
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="140"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatDate }}
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column
          label="操作"
          min-width="140"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="openQuestionModal(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              :style="{ color: scope.row.status == 1 ? '#F53F3F' : '#00B42A' }"
              @click="handleDisable(scope.row)"
            >
              {{ scope.row.status == 1 ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.size"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑试题抽屉 -->
    <el-drawer
      :title="modalTitle"
      :visible.sync="questionModalVisible"
      direction="rtl"
      :size="750"
      :close-on-click-modal="false"
      class="question-drawer"
    >
      <div style="padding: 20px;">
        <el-form
          ref="questionForm"
          :model="formData"
          :rules="formRules"
          label-width="100px"
          class="modal-form"
        >
          <el-row :gutter="20">
            <!-- 分类输入 -->
            <el-col :span="12">
              <el-form-item label="分类" prop="categoryId">
                <el-select
                  v-model="formData.categoryId"
                  placeholder="选择或输入分类"
                  clearable
                  filterable
                  allow-create
                  default-first-option
                  style="width: 100%;"
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <p class="form-hint">选择已有分类或输入新分类</p>
              </el-form-item>
            </el-col>

            <!-- 题型选择 -->
            <el-col :span="12">
              <el-form-item label="题型" prop="type">
                <el-select
                  v-model="formData.type"
                  placeholder="请选择题型"
                  @change="handleTypeChange"
                  style="width: 100%;"
                >
                  <el-option label="单选题" value="1">
                    <i class="el-icon-document"></i> 单选题
                  </el-option>
                  <el-option label="多选题" value="2">
                    <i class="el-icon-tickets"></i> 多选题
                  </el-option>
                  <el-option label="判断题" value="3">
                    <i class="el-icon-circle-check"></i> 判断题
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 题目内容 -->
            <el-col :span="24">
              <el-form-item label="题目内容" prop="content">
                <el-input 
                  v-model="formData.content" 
                  type="textarea" 
                  rows="4"
                  placeholder="请输入题目内容"
                  maxlength="500"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>

            <!-- 选项容器 -->
            <el-col :span="24">
              <el-form-item label="选项设置" prop="options">
                <div style="width: 100%;">
                  <div class="option-header">
                    <span class="tip-text">请在正确选项前打勾</span>
                  </div>
                  <div class="options-list">
                    <div 
                      v-for="(option, index) in formData.options" 
                      :key="index"
                      class="option-row"
                    >
                      <div class="option-label">{{ getOptionLetter(index) }}.</div>
                      <el-checkbox
                        v-model="formData.correctOptions[index]"
                        @change="handleCorrectOptionChange(index)"
                        class="option-checkbox"
                      >
                        <span class="checkbox-label">正确答案</span>
                      </el-checkbox>
                      <el-input
                        v-model="option.content"
                        :placeholder="`请输入选项 ${getOptionLetter(index)} 的内容`"
                        :readonly="formData.type === '3'"
                        class="option-input"
                      ></el-input>
                  <el-button
                    v-if="formData.type !== '3' && formData.options.length > 2"
                    type="text"
                    icon="el-icon-delete"
                    size="small"
                    class="option-delete"
                    @click="removeOption(index)"
                  ></el-button>
                    </div>
                  </div>
                  <el-button
                    v-if="formData.type !== '3'"
                    type="text"
                    icon="el-icon-plus"
                    size="small"
                    class="add-option-btn"
                    @click="addOption"
                  >
                    添加选项
                  </el-button>
                </div>
              </el-form-item>
            </el-col>

            <!-- 答案解析 -->
            <el-col :span="24">
              <el-form-item label="答案解析">
                <el-input 
                  v-model="formData.explanation" 
                  type="textarea" 
                  rows="3"
                  placeholder="请输入答案解析(可选),帮助学生理解正确答案"
                  maxlength="300"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div style="text-align: right; margin-top: 30px; padding-top: 20px; border-top: 1px solid #EBEEF5;">
          <el-button @click="questionModalVisible = false" size="medium">取消</el-button>
          <el-button type="primary" @click="saveQuestion" size="medium">
            {{ modalTitle.includes('编辑') ? '保存修改' : '创建' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data() {
    // 选项验证：至少有一个正确选项，且选项内容不能为空
    const validateOptions = (rule, value, callback) => {
      // 检查选项内容是否为空
      const hasEmptyOption = this.formData.options.some(option => !option.content.trim());
      if (hasEmptyOption) {
        callback(new Error('选项内容不能为空'));
        return;
      }

      // 检查是否有正确选项
      const hasCorrect = this.formData.correctOptions.some(v => v);
      if (!hasCorrect) {
        callback(new Error('请选择正确答案'));
        return;
      }

      // 单选题只能有一个正确选项
      if (this.formData.type === '1' && this.formData.correctOptions.filter(v => v).length > 1) {
        callback(new Error('单选题只能有一个正确答案'));
        return;
      }

      callback();
    };

    return {
      // 搜索表单
      searchForm: {
        keyword: '',
        category: '',
        type: '',
        status: ''
      },

      // 分类列表
      categoryList: [],

      // 试题列表数据
      questionList: [],
      loading: false,

      // 分页配置
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },

      // 模态框状态
      questionModalVisible: false,
      modalTitle: '添加试题',

      // 表单数据
      formData: {
        id: '',
        category: '',
        type: '',
        content: '',
        options: [], // 选项列表：[{ content: '' }]
        correctOptions: [], // 正确选项标记
        explanation: ''
      },

      // 题型映射
      typeLabelMap: {
        '1': '单选题',
        '2': '多选题',
        '3': '判断题',
        1: '单选题',
        2: '多选题',
        3: '判断题'
      },

      // 表单验证规则
      formRules: {
        categoryId: [
          { required: true, message: '请选择或输入分类', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入题目内容', trigger: 'blur' },
          { min: 5, max: 500, message: '题目长度在5-500个字符之间', trigger: 'blur' }
        ],
        options: [
          { required: true, validator: validateOptions, trigger: 'change' }
        ]
      }
    };
  },
  
  mounted() {
    // 初始化加载题目列表和分类
    this.getQuestionList()
    this.getCategories()
  },
  
  methods: {
    // 获取题目列表
    async getQuestionList() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          page_size: this.pagination.size
        }
        
        // 只添加有值的搜索参数
        if (this.searchForm.keyword) {
          params.content = this.searchForm.keyword
        }
        if (this.searchForm.category) {
          params.category_id = this.searchForm.category
        }
        if (this.searchForm.type) {
          params.type = this.searchForm.type
        }
        if (this.searchForm.status) {
          params.status = this.searchForm.status
        }
        
        const res = await api.question.getQuestionList(params)
        
        if (res && res.code === 200) {
          const list = Array.isArray(res.data?.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
          
          this.questionList = list.map(item => {
            // 解析选项 - 后端返回的是JSON字符串或数组
            let options = []
            if (typeof item.options === 'string') {
              try {
                const parsedOptions = JSON.parse(item.options)
                options = Array.isArray(parsedOptions) 
                  ? parsedOptions.map(opt => {
                      // 移除选项前的字母前缀 (如 "A.111" -> "111")
                      const content = opt.replace(/^[A-Z]\./, '')
                      return { content }
                    })
                  : []
              } catch (e) {
              }
            } else if (Array.isArray(item.options)) {
              options = item.options.map(opt => {
                const content = typeof opt === 'string' ? opt.replace(/^[A-Z]\./, '') : opt.content || ''
                return { content }
              })
            }
            
            // 解析正确答案
            const correctOptions = this.parseCorrectOptions(item.answer, item.type, options)
            
            return {
              id: item.id,
              category: item.category?.name || item.category_name || '',
              categoryId: item.category_id,
              type: String(item.type), // 转为字符串: '1', '2', '3'
              content: item.content || '',
              options: options,
              correctOptions: correctOptions,
              explanation: item.explanation || '',
              status: item.status === 1 || item.status === '1' ? '1' : '0',
              createTime: item.created_at || item.create_time || ''
            }
          })
          
          // 兼容两种分页格式
          if (res.pagination) {
            this.pagination.total = res.pagination.total || 0
            this.pagination.page = res.pagination.page || this.pagination.page
            this.pagination.size = res.pagination.page_size || this.pagination.size
          } else if (res.data) {
            this.pagination.total = res.data.total || 0
            this.pagination.page = res.data.page || this.pagination.page
            this.pagination.size = res.data.page_size || this.pagination.size
          }
        }
      } catch (error) {
        this.$message.error('获取题目列表失败')
      } finally {
        this.loading = false
      }
    },
    
    // 解析正确答案为布尔数组
    parseCorrectOptions(answer, type, options) {
      const correctOptions = new Array(options.length).fill(false)
      
      if (!answer) return correctOptions
      
      if (type === 1 || type === '1' || type === 3 || type === '3') {
        // 单选题或判断题 - answer是单个值 (如 "A" 或 "正确")
        const index = this.getOptionIndex(answer, options)
        if (index !== -1) {
          correctOptions[index] = true
        }
      } else if (type === 2 || type === '2') {
        // 多选题 - answer是逗号分隔的值 (如 "A,B,C")
        const answers = answer.split(',')
        answers.forEach(ans => {
          const index = this.getOptionIndex(ans.trim(), options)
          if (index !== -1) {
            correctOptions[index] = true
          }
        })
      }
      
      return correctOptions
    },
    
    // 获取选项索引
    getOptionIndex(answerKey, options) {
      // 如果是字母(A,B,C...)，转为索引
      if (/^[A-Z]$/.test(answerKey)) {
        return answerKey.charCodeAt(0) - 65 // A=0, B=1, C=2...
      }
      // 如果是"正确"/"错误"，查找匹配的选项
      return options.findIndex(opt => opt.content === answerKey)
    },
    
    // 获取分类列表
    async getCategories() {
      try {
        const res = await api.question.getQuestionCategories()
        if (res && res.code === 200) {
          const list = Array.isArray(res.data?.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
          // 处理分类数据,统一为 {id, name} 格式
          this.categoryList = list.map(item => {
            if (typeof item === 'object' && item.id && item.name) {
              return { id: item.id, name: item.name }
            } else if (typeof item === 'string') {
              // 兼容字符串格式
              return { id: item, name: item }
            } else {
              return { id: item.id || item, name: item.name || item }
            }
          })
        }
      } catch (error) {
      }
    },
    
    // 打开试题模态框(新增/编辑)
    openQuestionModal(row) {
      if (row) {
        // 编辑模式
        this.modalTitle = '编辑试题';
        this.formData = {
          id: row.id || '',
          categoryId: row.categoryId || '', // 使用已映射的categoryId
          type: row.type || '',
          content: row.content || '',
          explanation: row.explanation || '',
          options: row.options ? JSON.parse(JSON.stringify(row.options)) : [],
          correctOptions: row.correctOptions ? [...row.correctOptions] : []
        };
      } else {
        // 新增模式
        this.modalTitle = '添加试题';
        this.formData = {
          id: '',
          categoryId: '',
          type: '',
          content: '',
          options: [],
          correctOptions: [],
          explanation: ''
        };
        // 默认初始化2个选项
        this.initOptions('');
      }
      
      // 先打开抽屉
      // 先打开抽屉
      this.questionModalVisible = true;
      
      // 然后在下一帧重置表单
      this.$nextTick(() => {
        this.$refs.questionForm && this.$refs.questionForm.clearValidate();
      });
    },

    // 搜索功能
    handleSearch() {
      this.pagination.page = 1
      this.getQuestionList()
    },

    // 重置功能
    handleReset() {
      this.searchForm = {
        keyword: '',
        category: '',
        type: '',
        status: ''
      }
      this.pagination.page = 1
      this.getQuestionList()
    },

    // 初始化选项
    initOptions(type) {
      this.formData.options = []
      this.formData.correctOptions = []
      
      if (type === '1') {
        // 单选题默认4个选项，第一个默认正确
        this.addOption(true)
        this.addOption(false)
        this.addOption(false)
        this.addOption(false)
      } else if (type === '2') {
        // 多选题默认4个选项，第一个默认正确
        this.addOption(true)
        this.addOption(false)
        this.addOption(false)
        this.addOption(false)
      } else if (type === '3') {
        // 判断题固定2个选项：正确、错误
        this.formData.options = [
          { content: '正确' },
          { content: '错误' }
        ]
        this.formData.correctOptions = [true, false]
      } else {
        // 默认状态
        this.addOption(true)
        this.addOption(false)
      }
    },

    // 添加选项
    addOption(isCorrect = false) {
      this.formData.options.push({ content: '' });
      this.formData.correctOptions.push(isCorrect);
    },

    // 移除选项
    removeOption(index) {
      this.formData.options.splice(index, 1);
      this.formData.correctOptions.splice(index, 1);
    },

    // 题型切换
    handleTypeChange(type) {
      this.initOptions(type);
    },

    // 处理正确答案选择变化（单选题和判断题只能选一个）
    handleCorrectOptionChange(index) {
      if (this.formData.type === '1' || this.formData.type === '3') {
        // 单选题或判断题：如果选择了新的答案，取消其他所有答案
        if (this.formData.correctOptions[index]) {
          this.formData.correctOptions = this.formData.correctOptions.map((v, i) => i === index)
        }
      }
    },

    // 获取选项字母（A,B,C...）
    getOptionLetter(index) {
      const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
      return letters[index] || (index + 1);
    },

    // 格式化答案显示
    formatAnswer(row) {
      const correctIndexes = row.correctOptions
        .map((isCorrect, index) => isCorrect ? index : -1)
        .filter(index => index !== -1)
      
      if (row.type === '3') {
        return correctIndexes[0] === 0 ? '正确' : '错误'
      }
      
      return correctIndexes
        .map(index => `${this.getOptionLetter(index)}.${row.options[index].content}`)
        .join('，')
    },

    // 格式化答案为提交格式
    formatAnswerForSubmit(type, options, correctOptions) {
      const correctIndexes = correctOptions
        .map((isCorrect, index) => isCorrect ? index : -1)
        .filter(index => index !== -1)
      
      let answer = ''
      if (type === '1' || type === '3') {
        // 单选题和判断题 - 单个答案
        if (type === '3') {
          answer = options[correctIndexes[0]].content
        } else {
          answer = this.getOptionLetter(correctIndexes[0])
        }
      } else if (type === '2') {
        // 多选题 - 逗号分隔
        answer = correctIndexes.map(i => this.getOptionLetter(i)).join(',')
      }
      
      return answer
    },

    // 保存试题
    saveQuestion() {
      this.$refs.questionForm.validate(async valid => {
        if (valid) {
          try {
            // 准备提交数据
            // 格式化答案
            const answer = this.formatAnswerForSubmit(
              this.formData.type,
              this.formData.options,
              this.formData.correctOptions
            )
            
            // 格式化选项数组 - 后端需要带字母前缀
            const options = this.formData.options.map((opt, index) => 
              `${this.getOptionLetter(index)}.${opt.content}`
            )
            
            const submitData = {
              content: this.formData.content,
              type: Number(this.formData.type),
              options: options,
              answer: answer,
              explanation: this.formData.explanation || '',
              status: 1
            }
            
            // 根据categoryId的类型判断是已有分类还是新分类
            const existingCategory = this.categoryList.find(c => c.id === this.formData.categoryId)
            if (existingCategory) {
              // 选择已有分类: 传category_id
              submitData.category_id = this.formData.categoryId
            } else if (this.formData.categoryId) {
              // 输入新分类: 传category字符串
              submitData.category = this.formData.categoryId
            }
            
            if (this.formData.id) {
              // 编辑
              submitData.id = this.formData.id
              await api.question.updateQuestion(submitData)
              this.$message.success('编辑试题成功')
            } else {
              // 新增
              await api.question.createQuestion(submitData)
              this.$message.success('新增试题成功')
            }
            
            this.questionModalVisible = false
            this.getQuestionList()
          } catch (error) {
            this.$message.error('保存试题失败')
          }
        }
      })
    },



    // 停用/启用试题
    async handleDisable(row) {
      const updateStatusName = row.status == 1 ? '停用' : '启用';
      
      try {
        await this.$confirm(`确定要${updateStatusName}《${row.content}》这道试题吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        await api.question.updateQuestion({
          ...row,
          ...{
             status: row.status == 1 ? 0 : 1,
             answer: this.formatAnswerForSubmit(row.type, row.options, row.correctOptions), 
             options: row.options.map((opt, index) => `${this.getOptionLetter(index)}.${opt.content}`),
             category_id: row.categoryId,
             
             category: undefined,
             categoryId: undefined,
             createTime: undefined,
             correctOptions: undefined
          }
        });
        
        this.$message.success(`${updateStatusName}成功`);
        this.getQuestionList();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error(`${updateStatusName}失败`);
        }
      }
    },

    // 分页相关方法
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.page = 1
      this.getQuestionList()
    },
    handleCurrentChange(page) {
      this.pagination.page = page
      this.getQuestionList()
    }
  }
}
</script>

<style scoped>
/* 页面标题 */
.page-header {
  margin-bottom: 20px;
  text-align: left;
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #304156;
  margin-bottom: 5px;
  margin-left: 0;
}
.desc {
  color: #86909C;
  font-size: 14px;
  text-align: left;
}

/* 搜索区 */
.search-card {
  padding: 15px 20px;
}
.search-container {
  width: 100%;
}

/* 表格头部 */
.table-header {
  margin-bottom: 16px;
  text-align: left;
}

/* 试题列表样式 */
.question-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.answer-content {
  color: #4E5969;
}

/* 题型标签样式 */
.question-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.question-tag-single {
  background-color: #EBF3FF;
  color: #165DFF;
  border-color: #EBF3FF;
}
.question-tag-multiple {
  background-color: #F3E8FF;
  color: #7C3AED;
  border-color: #F3E8FF;
}
.question-tag-judge {
  background-color: #D1FAE5;
  color: #059669;
  border-color: #D1FAE5;
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 抽屉表单样式 */
.question-drawer {
  --drawer-padding: 20px;
}
.modal-form {
  margin-top: 10px;
}

/* 表单提示 */
.form-hint {
  margin-top: 5px;
  font-size: 12px;
  color: #86909C;
  line-height: 1.4;
}

/* 选项组样式 */
.option-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.tip-text {
  font-size: 13px;
  color: #86909C;
}
.options-list {
  width: 100%;
  margin-bottom: 12px;
}
.option-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background-color: #F7F8FA;
  border-radius: 6px;
  border: 1px solid #E5E6EB;
}
.option-label {
  font-weight: 600;
  color: #1D2129;
  margin-right: 12px;
  min-width: 24px;
}
.option-checkbox {
  margin-right: 12px;
}
.checkbox-label {
  font-size: 12px;
  color: #4E5969;
}
.option-input {
  flex: 1;
  margin-left: 10px;
}
.option-delete {
  color: #86909C;
  margin-left: 12px;
}
.option-delete:hover {
  color: #F53F3F;
}
.add-option-btn {
  color: #165DFF;
  padding-left: 0;
}
.add-option-btn:hover {
  color: #0E42D2;
}
.option-limit-tip {
  font-size: 12px;
  color: #86909C;
  margin-top: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-container .el-row {
    flex-direction: column;
    gap: 10px;
  }
}
</style>